<template>
  <div class="search-hot">
    <h3>热门搜索</h3>
    <ul class="hot-word">
      <li
        v-for="word in hotWords"
        :key="word.first"
        @click.stop="$emit('search', word.first)"
      >
        {{ word.first }}
      </li>
    </ul>
    <ol class="history">
      <!-- <li v-for="(item, index) in historyNum" :key="index">
        <div class="time"></div>
        <p>
          {{ item }}
        </p>
        <div class="close" @click.stop="close(index)"></div>
      </li> -->
      <li @click.stop="$emit('search', h)" v-for="h in historyArr" :key="h">
        <div class="time"></div>
        <p>
          {{ h }}
        </p>
        <div class="close" @click.stop="delHistory(h)"></div>
      </li>
    </ol>
  </div>
</template>

<script>
///search/hot
export default {
  props: {
    // historyNum: {
    //   type: Array,
    //   default: () => {
    //     return [];
    //   },
    // },
  },
  data() {
    return {
      hotWords: [],
      historyArr: [],
      // num: 0,
    };
  },
  created() {
    this.getHotword();
  },
  methods: {
    //异步函数
    async getHotword() {
      await this.axios.get("/search/hot").then((re) => {
        this.hotWords = re.result.hots;
        this.getHistory();
      });
    },
    getHistory() {
      let historyword = localStorage.getItem("searchhistory");
      console.log(historyword);
      if (historyword) {
        this.historyArr = JSON.parse(historyword);
      }
    },
    delHistory(word) {
      let historyWords = localStorage.getItem("searchhistory");
      historyWords = JSON.parse(historyWords).filter((v) => {
        return v != word;
      });
      this.historyArr = historyWords
      localStorage.setItem("searchhistory",JSON.stringify(historyWords))
    },

    // close(e) {
    // console.log(e);
    // this.$emit("dataNum", e);
    // },
  },
};
</script>

<style lang="scss" scoped>
.search-hot {
  width: 100%;
  padding: 10px 15px 0;
  h3 {
    font-size: 12px;
    line-height: 12px;
    color: #666;
  }
  .hot-word {
    width: 100%;
    margin: 10px 0 7px;
    li {
      display: inline-block;
      height: 32px;
      margin-right: 8px;
      margin-bottom: 8px;
      padding: 0 14px;
      font-size: 14px;
      line-height: 32px;
      color: #333;
    }
  }
  .history {
    li {
      height: 45px;
      display: flex;
      align-items: center;
      .time {
        width: 15px;
        height: 15px;
        background: url(@/assets/time.png) no-repeat;
        background-size: cover;
        margin: 0 10px;
      }
      p {
        flex: 1;
        font-size: 14px;
      }
      .close {
        width: 15px;
        height: 15px;
        background: url(@/assets/cl.png) no-repeat;
        background-size: cover;
        margin: 0 10px;
      }
    }
  }
}
</style>